<template>
  <a-button type="primary" @click="addCheckOut" style="margin-bottom: 10px;margin-left: 5px">添加报告</a-button>
  <a-table :columns="columns" :data-source="state.checkouts" :rowKey="record=>record.id" bordered
           :scroll="{ x: 1500, y: 300 }" style="height: 80%">

    <template #imgaction="record">
      <nav v-if="record.record.image != null">
        <a-image-preview-group>
          <span v-for="(value,key) in record.record.image" :key="key">
          <a-image style="width: 50px;height: 50px"
                   :src="value"/>&nbsp;
          </span>
        </a-image-preview-group>
      </nav>
      <div v-else></div>
    </template>

    <template #action="record">
      <div>
        <a-popconfirm
            title="确认删除吗?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(record.record.id)"
            @cancel="cancel"
        >
          <a-button href="#">删除</a-button>
        </a-popconfirm>
        <a-button type="primary" @click="edit(record.record.id)" style="float: right">编辑</a-button>
      </div>
    </template>
  </a-table>

  <a-modal
      :title="Title"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk(state.checkout)"
  >
    <a-form :model="state.checkout" :label-col="{span: 5}" :wrapper-col="{ span: 16 }">
      <a-form-item label="id" v-if="state.checkout.id == null" hidden>
        <a-input v-model:value="state.checkout.id" style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="id" v-else>
        <a-input v-model:value="state.checkout.id" disabled style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="治疗id">
        <a-input v-if="state.checkout.id==null" v-model:value="state.checkout.cureId" style="width: 300px;"/>
        <a-input v-else v-model:value="state.checkout.cureId" disabled style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="项目名">
        <a-input v-model:value="state.checkout.project" style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="检查结果">
        <a-input v-model:value="state.checkout.result" style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="是否为影像">
        <input type="radio" name="isImage" value="0" v-model="state.checkout.isImage"/><label
          style="left: 5px;size: 20px">&nbsp;否&nbsp;&nbsp;</label>
        <input type="radio" name="isImage" value="1" v-model="state.checkout.isImage"/><label
          style="left: 10px;size: 20px">&nbsp;是</label>
      </a-form-item>
      <a-form-item label="追加影像" v-if="state.checkout.isImage == 1">
        <a-upload-dragger
            v-model:fileList="fileList"
            name="files"
            :multiple="true"
            action="https://cloud.nweb.top/api/checkout/upload"
            @change="handleChange"
            @drop="handleDrop"
        >
          <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
          </p>
          <p class="ant-upload-text">Click or drag file to this area to upload</p>
          <p class="ant-upload-hint">
            Support for a single or bulk upload. Strictly prohibit from uploading company data or other
            band files
          </p>
        </a-upload-dragger>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import {defineComponent, onMounted, reactive, ref} from "vue";
import {
  reqGetAllCheckout,
  reqGetCheckoutById,
  reqUpdateCheckoutById,
  reqDeleteCheckoutById,
  reqAddCheckout
} from "../api/index";
import {InboxOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";


const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    align: 'center',
  },
  {
    title: "治疗id",
    dataIndex: "cureId",
    key: "cureId",
    align: 'center',
  },
  {
    title: "项目名",
    dataIndex: "project",
    key: "project",
    align: 'center',
  },
  {
    title: "检查结果",
    dataIndex: "result",
    key: "result",
    align: 'center',
  },
  {
    title: "是否为影像",
    dataIndex: "isImage",
    key: "isImage",
    align: 'center',

  },
  {
    title: "最后更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    align: 'center',
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    align: 'center',

  },
  {
    title: "影像",
    dataIndex: "image",
    key: "image",
    width: 200,
    align: "center",
    fixed: "right",
    slots: {
      customRender: 'imgaction',
    },
  },
  {
    title: "操作",
    width: 200,
    dataIndex: "",
    key: "x",
    fixed: 'right',
    align: 'center',
    slots: {
      customRender: "action",
    },
  },
];
export default defineComponent({
  components: {
    InboxOutlined,
  },
  setup() {
    const Title = ref('')
    const state = reactive({
      checkouts: [],
      checkout: {},
      type: "",
    });

    const modalText = ref("Content of the modal");
    const visible = ref(false);
    const confirmLoading = ref(false);
    const addCheckOut = () => {
      state.type = "add";
      Title.value = "添加检查报告";
      visible.value = true;
      state.checkout = {};
      fileList.value = []
      fileListLength.value = 0;
    };

    const handleChange = info => {
      const status = info.file.status;

      if (status !== 'uploading') {
        console.log(info.file.response.data);
        if (state.checkout.image == null || state.checkout.image == undefined) {
          state.checkout.image = ''
        }
        // state.checkout.image = '';
        console.log("info.file.response.data: ", info.file.response.data)
        console.log("info.fileList: ", info.fileList);
        console.log("fileList: ", fileList.value);
        console.log("state.checkout.image前: ", state.checkout.image);

        if (fileListLength.value <= info.fileList.length) {
          state.checkout.image += ';' + 'https://images.nweb.top/' + info.file.response.data + ';'
        } else {
          state.checkout.image = state.checkout.image.replace('https://images.nweb.top/' + info.file.response.data + ';', '')
        }
        // console.log(info.file, info.fileList);
        console.log("state.checkout.image后: ", state.checkout.image);

        fileListLength.value = info.fileList.length;
      }

      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    };
    const handleOk = async (checkout) => {
      modalText.value = "please wait for sometime";
      confirmLoading.value = true;
      if (state.type === "update") {
        if (checkout.isImage == 0) {
          checkout.image = '';
        }
        let result = await reqUpdateCheckoutById(checkout);
        if (result.code === 200) {
          visible.value = false;
          confirmLoading.value = false;
          let result = await reqGetAllCheckout();
          for (let i in result.data) {
            let tempImg = result.data[i].image.split(";");
            if (tempImg == null) {
              continue;
            }

            result.data[i].image = []
            for (let img of tempImg) {
              if (img == '' || img == null) {
                continue;
              }
              result.data[i].image.push(img)
            }
          }

          state.checkouts = result.data;
          state.checkout = {};
          fileListLength.value = 0;
        }
      } else if (state.type === "add") {
        let result = await reqAddCheckout(checkout)
        if (result.code === 200) {
          visible.value = false;
          confirmLoading.value = false;
          let result = await reqGetAllCheckout();

          for (let i in result.data) {
            let tempImg = result.data[i].image.split(";");
            if (tempImg == null) {
              continue;
            }

            result.data[i].image = []
            for (let img of tempImg) {
              if (img == '' || img == null) {
                continue;
              }
              result.data[i].image.push(img)
            }
          }
          state.checkouts = result.data;
          state.checkout = {};
          fileListLength.value = 0;
        }
      }
    };
    const edit = async (id) => {
      let result = await reqGetCheckoutById(id);
      state.type = "update";
      Title.value = "修改检查报告";
      state.checkout = result.data;
      visible.value = true;
      fileList.value = []
      fileListLength.value = 0
    };
    const confirm = async (id) => {
      let result = await reqDeleteCheckoutById(id);
      if (result.code === 200) {
        message.success("删除成功");
        let result = await reqGetAllCheckout();
        for (let i in result.data) {
          let tempImg = result.data[i].image.split(";");
          if (tempImg == null) {
            continue;
          }

          result.data[i].image = []
          for (let img of tempImg) {
            if (img == '' || img == null) {
              continue;
            }
            result.data[i].image.push(img)
          }
        }
        state.checkouts = result.data;
      }
    };

    const cancel = (e) => {
      console.log(e);
      message.error("Click on No");
    };
    onMounted(async () => {
      let result = await reqGetAllCheckout();
      for (let i in result.data) {
        let tempImg = result.data[i].image.split(";");
        if (tempImg == null) {
          continue;
        }

        result.data[i].image = []
        for (let img of tempImg) {
          if (img == '' || img == null) {
            continue;
          }
          result.data[i].image.push(img)
        }
      }

      state.checkouts = result.data;
    });
    const fileList = ref([]);
    const fileListLength = ref(0);
    return {
      Title,
      state,
      // info,
      columns,
      edit,
      modalText,
      visible,
      confirmLoading,
      handleOk,
      confirm,
      cancel,
      addCheckOut,
      handleChange,
      fileList,
      handleDrop: e => {
        console.log("eeee: ", e.data());
      },
      fileListLength,
    };
  },
});
</script>
